<template>
  <el-tooltip class="xcheckbox-item"
    :class="{
      mr40: !(index % 2)
    }"
    :disabled="isShowTips"
    placement="left"
    effect="light"
    content="组别名称不能重复">
    <el-checkbox
      :disabled="checkState || disabled"
      :label="myValue"
      :checked="checked"
      @change="handleCheck">
      <slot>
        <template v-if="formType === FORM_TYPE_ENUMS.INPUT">
          <el-input class="input-small xsmall" placeholder="自定义属性"
            v-bind="$props"
            :disabled="checked || disabled"
            :value="myValue.name"
            :minlength="minlength"
            :maxlength="maxlength || MAX_CUSTOM_NAME_NUM"
            @change="handleChange"/>
        </template>
        <template v-if="formType === FORM_TYPE_ENUMS.TIME">
          <el-date-picker class="date-small xsmall" placeholder="自定义属性"
            v-model="editorDate"
            type="datetime"
            format="yyyy-MM-dd HH:mm"
            :picker-options="pickerOptions"
            :disabled="checked || disabled"
            @change="handleChange"/>
        </template>
      </slot>
    </el-checkbox>
  </el-tooltip>
</template>
<script>
  /**
   * 说明
   * 删除inputCheckbox，将逻辑整合进xcheckbox 和 checkboxGroups
   */
  import {Input} from '@element-ui'
  import { MAX_CUSTOM_NAME_NUM, FORM_TYPE_ENUMS } from '../constant'
  export default {
    props: {
      ...Input.props, // 继承Input的所有属性
      value: Object,
      index: Number,
      exitNameList: {
        type: Array,
        default: []
      },
      exitCheckList: {
        type: Array,
        default: []
      },
      formType: {
        type: Number,
        default: 1
      },
      minlength: {
        type: Number
      },
      maxlength: {
        type: Number
      }
    },
    computed: {
      myValue () {
        return this.value
      },
      isEditor () {
        return !!this.value.value
      }
    },
    mounted () {
      // 初始化编辑 => 复选框选中  文本框禁用
      if (this.isEditor) { // 有code则为修改
        this.checked = !0
        this.checkState = !1
        this.handleUpdateExitName(this.myValue.name)
      }
    },
    data () {
      let editorDate = this.formType === FORM_TYPE_ENUMS.TIME ? this.value.name : ''
      return {
        FORM_TYPE_ENUMS: FORM_TYPE_ENUMS,
        MAX_CUSTOM_NAME_NUM: MAX_CUSTOM_NAME_NUM,
        editorDate: editorDate,
        checked: !1,
        isShowTips: !0,
        exitIndex: -1, // 重名列表索引
        checkState: !0, // 复选框是否可选  1、名称不能为空2、名称不能重名
        // 日期
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    methods: {
      handleChange (newVal) {
        if (newVal) {
          this.checkState = !1
        } else {
          this.checkState = !0
        }
        let curExitIndex = this.exitNameList.findIndex(k => k === newVal)
        // 不会和当前索引的内容匹配
        if (newVal && curExitIndex !== -1 && curExitIndex !== this.exitIndex) {
          this.isShowTips = !1 // 重复则显示提示
          this.checkState = !0
          // this.handleDelExitName()
          return false
        }
        this.handleUpdateExitName(newVal)
        this.isShowTips = !0
        let newValObj = Object.assign({}, this.myValue, {
          name: newVal,
          nameIndex: this.exitIndex
        })
        this.$emit('change', this.index, newValObj)
      },
      handleDateChange (newVal) {
        console.log(newVal, 1)
      },
      handleUpdateExitName (newVal) {
        if (this.exitIndex === -1) {
          this.exitIndex = this.exitNameList.push(newVal) - 1 // push返回新长度 - 1 为索引
        } else {
          this.exitNameList.splice(this.exitIndex, 1, newVal) // 替换值
        }
        this.$emit('update:exitNameList', this.exitNameList)
      },
      handleDelExitName () {
        // 删除重名项
        if (this.exitIndex !== -1) {
          this.exitNameList.splice(this.exitIndex, 1)
          this.$emit('update:exitNameList', this.exitNameList)
        }
      },
      handleCheck ($event) {
        // 复选框组 限制节点需要特殊处理
        this.$nextTick(() => {
          // 如果只有一组时  限制不给取消选择
          this.checked = $event.target.checked
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn-icon{
    margin-right: 0;
  }
  .xcheckbox-item{
    .xsmall {
      width: 236px;
      &.input-small{
        margin-left: 4px;
      }
    }
  }
  
</style>
<style lang="scss">
  .xcheckbox-item.mr40 + .el-button{
    margin-right: 40px;
  }
</style>
